<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
    <!--导入js package-->
    <script type="text/javascript" src="../01-vue_js/vue.js"></script>
    <style>
        * {
            margin-top: 20px;
        }

        .demo1 {
            height: 50px;
            background-color: aqua;
        }

        .demo2 {
            height: 50px;
            background-color: cornflowerblue;
        }

        .demo3 {
            height: 80px;
            background-color: brown;
        }

        .demo4 {
            height: 50px;
            background-color: darkcyan;
        }

        .list {
            width: 200px;
            height: 200px;
            background-color: darkorchid;
            overflow: auto;
        }

        li {
            height: 100px;
        }
    </style>
</head>

<body>
<div id="root">

    <h1>欢迎来到{{name}}学习</h1>
    <!--    1. prevent:阻止默认事件（常用）;-->
    <a href="https://gitee.com/xjl2462612540/Athena-React" @click.prevent="showInfo">点我提示信息 具有事件修饰符的</a>
    <!--    stop:阻止事件冒泡（常用）;-->
    <div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">点我阻止冒泡</button>
    </div>
    <!--    once:事件只触发一次（常用）;-->
    <div class="demo2">
        <button @click.once="showInfo">事件只能触发一次</button>
    </div>
    <!--    capture:使用事件的捕获模式;-->
    <div class="demo3" @click.capture="showMessage(3)">
        <button>demo3</button>
        <div class="demo4" @click="showMessage(4)">
            <button>demo4</button>
        </div>
    </div>
    <!--    self:只有event.target是当前操作的元素是才触发事件;-->
    <div class="demo2" @click.self="showInfo">
        <button @click="showInfo">self</button>
    </div>
    <!--    passive:事件的默认行为立即执行，无需等待事件回调执行完毕;-->
    <ul @wheel.passive="demo" class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>


<script type="text/javascript">
    // 关闭开发环境的警告提示
    Vue.config.productionTip = false
    // 创建vue的对象
    new Vue({
        el: '#root',
        data: {
            name: "庄小焱2"
        },
        methods: {
            showInfo(event) {
                alert(event.target)
            },
            showMessage(messgae) {
                alert(messgae)
            },
            demo() {
                for (let i = 0; i < 1000; i++) {
                    console.log(i)
                }
            }
        }
    })
</script>
</body>
</html>